<template>
  <div class="app-container">
    <el-dialog title="分配客户权限" :visible.sync="detailvisible" width="1000px" append-to-body>
    <p style="text-align: center; margin: 0 0 20px">给用户 <strong><font size="5">{{userName}}</font></strong> 分配客户</p>
      <div style="text-align: center;min-height: 600px;" >
        <el-transfer
          style="text-align: left; display: inline-block;"

          v-model="checkedValue"
          filterable
          :left-default-checked="[2, 3]"
          :right-default-checked="[1]"
          :render-content="renderFunc"
          :titles="['未分配', '已分配']"
          :button-texts="['到左边', '到右边']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
          @change="handleChange"
          :data="data">
<!--          <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
 -->          <el-button class="transfer-footer" slot="right-footer" size="small" @click="save">保存更新</el-button>
        </el-transfer>
      </div>
 </el-dialog>


  </div>
</template>

<script>
import { listAllSupplier } from "@/api/basicsystem/supplier";
import { saveUserBusiness,listValues } from "@/api/system/business";
export default {
  name: "AuthCustomer",
  dicts: ['isDefault'],
  data() {
    return {
      userName:null,
      userId:null,
      detailvisible: false,
      data:[],
      checkedValue: [],
      renderFunc(h, option) {
        return <span>{ option.label }</span>;
      }
    };
  },
  created() {

  },
  methods: {
    listValues() {
      listValues({'userId':this.userId,'type':'2'}).then(response => {
        this.checkedValue = response.data;

      });
    },
    save(){
      console.log(this.checkedValue)
      let saveParm={'userId':this.userId,'type':'2','valueList':this.checkedValue}//1 代表仓库 2 代表客户
      saveUserBusiness(saveParm).then(response => {
        this.$modal.msgSuccess("保存成功");
        this.detailvisible = false;
      });
    },
    show(userName,userId) {
      this.userName=userName;
      this.userId=userId;
      this.detailvisible = true;
      this.listAllSupplier();
      this.listValues();
    }, /** 查询所产客户 */
    listAllSupplier() {//
      let that=this;
      this.loading = true;
      listAllSupplier({'type':'客户'}).then(response => {
          console.log(response.data)
          let customerAll=response.data;
          console.log(customerAll.length)
          let data = [];
          customerAll.forEach(function(item, index) {
              //item2 就是当日按循环到的对象
              //index2是循环的索引，从0开始
              let label=item.supplier;
              let id=item.id;
              data.push({
                key: id,
                label:label
              });
             that.data=data;
          });
      });
    },
    handleChange(value, direction, movedKeys) {
    console.log(value, direction, movedKeys);
    }
  }
};
</script>
<style>
    .el-transfer-panel{
        height: 600px;
    }
    .el-transfer-panel__list.is-filterable{
        height: 500px;
    }
</style>
